<template>
    <div class="login-page">
        <!-- logo -->
        <img src="../assets/img/login/home-logo.png" alt="" class="home-logo">
        <!-- 标题 -->
        <p class="home-title"><span>城市管理大数据智慧平台</span></p>
        <!--提示语-->
        <div class="tips-message" v-if="tipsMessage !== ''">{{tipsMessage}} <span @click="tipsMessage = ''">×</span> </div>
        <!-- 登录框 -->
        <div class="login-box">
            <p class="login-title">用户登录</p>
            <div class="login-item">
                <img src="../assets/img/login/home-user.png" alt="">
                <input type="text" placeholder="用户名" class="login-input" v-model="userName">
            </div>
            <div class="login-item">
                <img src="../assets/img/login/home-pass.png" alt="">
                <!--<input type="password" placeholder="密码" class="login-input" v-model="passWord"
                       @keyup.enter="toLogin">-->
                <span class="show-pwd" @click="showPwd">
                    <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                </span>
                <input
                        :key="passwordType"
                        ref="password"
                        class="login-input"
                        v-model="passWord"
                        :type="passwordType"
                        placeholder="请输入密码"
                        name="password"
                        tabindex="2"
                        autocomplete="new-password"
                        @keyup="checkCapslock"
                        @blur="capsTooltip = false"
                        @keyup.enter="toLogin"
                />
            </div>
            <div class="remeber-pass">
                <input type="checkbox">
                <span>记住密码</span>
            </div>
            <!-- 登录按钮 -->
            <div class="login-btn">
                <button @click="toLogin">登&nbsp;&nbsp;录</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data () {
            return {
                // 用户名
                userName: "admin",
                // 密码
                passWord: '123456',
                // 提示语
                tipsMessage: "",
              //输入框的类型
              passwordType: 'password',
              capsTooltip: false,
            }
        },
        methods: {
            //键盘事件
            checkCapslock(e) {
                const { key } = e
                this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
            },
            //是否显示密码事件
            showPwd() {
                if (this.passwordType === 'password') {
                    this.passwordType = ''
                } else {
                    this.passwordType = 'password'
                }
                //调用input自身的focus事件
                this.$nextTick(() => {
                    this.$refs.password.focus()
                })
            },
            /**
             * Description:登录
             * Author:ybt
             * Date:2020/12/16
             */
            toLogin(){
                if (this.userName === '') {
                    this.tipsMessage = "请输入用户名";
                    return
                } else if (this.passWord === '') {
                    this.tipsMessage = "请输入密码";
                    return
                }
                let option = {
                    userName: this.userName,
                    passWord: this.passWord,
                };
                sessionStorage.setItem('loginInfo', JSON.stringify(option));
                this.tipsMessage = "";
                this.$router.push({
                    path: "/Home",
                    name: 'Home'
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .login-page{
        width:100%;
        height:100%;
        overflow: hidden;
        background: url(../assets/img/login/home-bg.png) no-repeat;
        background-size: 100%;
        // logo
        .home-logo{
            width:2.45rem;
            height:0.9125rem;
            margin:0.6625rem 0 0 0.7875rem;
        }
        // 标题
        .home-title{
            font-size: 1.15rem;
            //letter-spacing: 0.0125rem;
            text-align: center;
            color:#fff;
            line-height: 3rem;
            span{
                font-family: 'FZLTZH_GBK';
                background: linear-gradient(to right, #0073FF, #00ebfe, #00ebfe, #00a9ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        /*提示语*/
        .tips-message{
            position: absolute;
            top: 40px;
            left: calc(50% - 250px);
            width: 500px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #8dccff;
            color: #005498;
            border-color: #8dccff;
            border-radius: 4px;
            font-size: 14px;
            span{
                display: inline-block;
                float: right;
                margin-right: 20px;
                font-size: 24px;
                color: #999999;
                cursor: pointer;
                &:hover{
                    color: #005498;
                }
            }
        }
        //登录框
        .login-box{
            width:6.25rem;
            height:6.05rem;
            margin:0 auto;
            background: url(../assets/img/login/home-center.png) no-repeat;
            background-size: 100%;
            .login-title{
                line-height: 1.75rem;
                text-align: center;
                font-size: 0.475rem;
                color:#fff;
                letter-spacing: 0.01875rem;
            }
            .login-item{
                width:5.0375rem;
                height:0.7rem;
                margin:0 auto;
                position: relative;
                img{
                    width:0.2625rem;
                    position: absolute;
                    top:0 ;
                    bottom:0;
                    margin:auto  0.3rem;
                }
                input.login-input{
                    width:100%;
                    height:0.7rem;
                    border:0.025rem solid #103F77;
                    border-radius:0.075rem;
                    outline: none;
                    background: transparent;
                    padding:0 0.25rem 0 0.8rem;
                    font-size: 0.225rem;
                    letter-spacing: 0.0125rem;
                    color:#fff;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        color:#fff;
                        letter-spacing: 0.0375rem;
                    }
                    &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        color:#fff;
                        letter-spacing: 0.0375rem;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ */
                        color:#fff;
                        letter-spacing: 0.0375rem;
                    }
                    &:-ms-input-placeholder { /* Internet Explorer 10+ */
                        color:#fff;
                        letter-spacing: 0.0375rem;
                    }
                    &:focus{
                        border:0.025rem solid #1190CB;
                    }
                }
                &:nth-of-type(2){
                    margin-top:0.4125rem;
                }
                .show-pwd {
                    position: absolute;
                    right: 10px;
                    top:0.23rem;
                    font-size: 16px;
                    color: #889aa4;
                    cursor: pointer;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    img{

                    }
                }
            }
            .remeber-pass{
                width:5.0375rem;
                margin:0.4125rem auto 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                input{
                    width: 0.2rem;
                    height: 0.2rem;
                    display: inline-block;
                    outline: none;
                    border-radius:0.025rem;
                    margin-right:0.15rem;
                    position: relative;
                }
                input[type="checkbox"]::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: #19215F;
                    width: 100%;
                    height: 100%;
                    border: 0.0125rem solid #059ADF;
                }
                input[type="checkbox"]:checked::before {
                    content: "\2713";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 0.0125rem solid #059ADF;
                    color: #fff;
                    font-size: 0.225rem;
                    text-align: center;
                    line-height: 0.225rem;
                }
                span{
                    font-size: 0.2rem;
                    letter-spacing: 0.025rem;
                    color:#fff;
                }
            }
            .login-btn{
                width:5.0375rem;
                height:0.7rem;
                margin:0.5rem auto 0;
                button{
                    width:100%;
                    height:100%;
                    border-radius:0.075rem;
                    border:none;
                    font-size: 0.3rem;
                    color:#fff;
                    background: -webkit-linear-gradient(to bottom, #00B7FF, #037CE5); /* Safari 5.1-6.0 */
                    background: -o-linear-gradient(to bottom, #00B7FF, #037CE5); /* Opera 11.1-12.0 */
                    background: -moz-linear-gradient(to bottom, #00B7FF, #037CE5); /* Firefox 3.6-15 */
                    background: linear-gradient(to bottom, #00B7FF, #037CE5); /* 标准语法 */
                    outline: none;
                    cursor: pointer;
                    &:hover{
                        background: -webkit-linear-gradient(to bottom, #0bb2f4, #0150fc); /* Safari 5.1-6.0 */
                        background: -o-linear-gradient(to bottom, #0bb2f4, #0150fc); /* Opera 11.1-12.0 */
                        background: -moz-linear-gradient(to bottom, #0bb2f4, #0150fc); /* Firefox 3.6-15 */
                        background: linear-gradient(to bottom, #0bb2f4, #0150fc); /* 标准语法 */
                    }
                }
            }
        }
    }
</style>
